<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
		<link rel="stylesheet" type="text/css" href="css/element.css" />
		<title>筛选涨停助手股票信息</title>

	</head>

	<body>
		<div id="app">
			<h3 style="padding: 0px; text-align: center;">
				<el-date-picker @change="changeDate" format="yyyy 年 MM 月 dd 日" value-format="yyyy_MM_dd" v-model="showDate" type="date" placeholder="选择日期" ></el-date-picker>
			</h3>
			<el-tabs v-model="activeName" type="card">
			    <el-tab-pane label="竞价异动" name="hat">
					<el-table :data="tableDatas.hat" ref="hatMultipleTable" @selection-change="hatSelectionChange" @row-click="hatRowClick" height="700px" style="width: 100%" >
						<el-table-column width=55 type="selection" > </el-table-column>
					    <el-table-column width=80 prop="code" label="代码" sortable ></el-table-column>
					    <el-table-column width=80 prop="name" label="名称" sortable ></el-table-column>
					    <el-table-column width=100 prop="lb" label="昨日连板" sortable ></el-table-column>
					    <el-table-column width=100 prop="autionamount" label="金额(万)" sortable ></el-table-column>
					    <el-table-column width=100 prop="totaljh" label="今日集合" sortable ></el-table-column>
					    <el-table-column width=100 prop="yesterdayjh" label="昨日集合" sortable ></el-table-column>
					    <el-table-column width=115 prop="auctionzfpercent" label="集合涨幅%" sortable ></el-table-column>
					    <el-table-column width=115 prop="lidu" label="集合力度%" sortable ></el-table-column>
					    <el-table-column width=100 prop="jhhs" label="集合换手" sortable ></el-table-column>
					    <el-table-column width=90 prop="percentage24_25" label="24分%" sortable ></el-table-column>
					    <el-table-column width=120 prop="precentage25" label="最后10秒%" sortable ></el-table-column>
					    <el-table-column width=105 prop="auctionchange_24_50" label="最后10秒" sortable ></el-table-column>
					    <el-table-column width=100 prop="marketvalue" label="流通市值" sortable ></el-table-column>
					    <el-table-column width=280 prop="concept" label="题材" ></el-table-column>
					    <el-table-column width=500 label="分时" > <template slot-scope="scope"> <img :src="scope.row.imgurl" /> </template> </el-table-column>
					    <el-table-column width=500 label="日K" > <template slot-scope="scope"> <img :src="scope.row.imgurl" /> </template> </el-table-column>
					</el-table>
					<div style="margin-top: 20px">
					    <el-button @click="hatSubmit()">提交选中的股票</el-button>
					</div>
				</el-tab-pane>
			    <el-tab-pane label="分歧转一致" name="lbgk">
					<el-table :data="tableDatas.lbgk" ref="lbgkMultipleTable" @selection-change="lbgkSelectionChange" @row-click="lbgkRowClick" height="700px" style="width: 100%" >
						<el-table-column width=55 type="selection" > </el-table-column>
						<el-table-column width=80 prop="code" label="代码" sortable ></el-table-column>
						<el-table-column width=80 prop="name" label="名称" sortable ></el-table-column>
						<el-table-column width=100 prop="lb" label="昨日连板" sortable ></el-table-column>
						<el-table-column width=100 prop="autionamount" label="金额(万)" sortable ></el-table-column>
						<el-table-column width=100 prop="totaljh" label="今日集合" sortable ></el-table-column>
						<el-table-column width=100 prop="yesterdayjh" label="昨日集合" sortable ></el-table-column>
						<el-table-column width=115 prop="auctionzfpercent" label="集合涨幅%" sortable ></el-table-column>
						<el-table-column width=115 prop="lidu" label="集合力度%" sortable ></el-table-column>
						<el-table-column width=100 prop="jhhs" label="集合换手" sortable ></el-table-column>
						<el-table-column width=90 prop="percentage24_25" label="24分%" sortable ></el-table-column>
						<el-table-column width=120 prop="precentage25" label="最后10秒%" sortable ></el-table-column>
						<el-table-column width=105 prop="auctionchange_24_50" label="最后10秒" sortable ></el-table-column>
						<el-table-column width=100 prop="marketvalue" label="流通市值" sortable ></el-table-column>
						<el-table-column width=280 prop="concept" label="题材" ></el-table-column>
						<el-table-column width=500 label="分时" > <template slot-scope="scope"> <img :src="scope.row.imgurl" /> </template> </el-table-column>
						<el-table-column width=500 label="日K" > <template slot-scope="scope"> <img :src="scope.row.imgurl" /> </template> </el-table-column>
					</el-table>
					<div style="margin-top: 20px">
						<el-button @click="lbgkSubmit()">提交选中的股票</el-button>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</body>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/element.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var jhURL = "http://www.wuylh.com/jihehelper/";
		jhURL = "/lsh/jihehelper/";
		var vm = new Vue({
			el:"#app",
			data(){
				return {
					activeName: 'hat',
					hatMultipleSelection:[],
					lbgkMultipleSelection:[],
					tableDatas:{},
					showDate: getStrDate(new Date(), "_")
				}
			},
			methods:{
				lbgkSubmit(){
					if(this.lbgkMultipleSelection && this.lbgkMultipleSelection.length > 0){
						postData(jhURL+"json_data/lbgk", this.lbgkMultipleSelection);
					}else{
						vm.$message.error("没有选中数据。");
					}
				},
				lbgkRowClick(row, column, event){
					this.$refs.lbgkMultipleTable.toggleRowSelection(row);
				},
				lbgkSelectionChange(val){
					this.lbgkMultipleSelection = val;
				},
				hatSubmit(){
					if(this.hatMultipleSelection && this.hatMultipleSelection.length > 0){
						postData(jhURL+"json_data/hat", this.hatMultipleSelection);
					}else{
						vm.$message.error("没有选中数据。");
					}
				},
				hatRowClick(row, column, event){
					this.$refs.hatMultipleTable.toggleRowSelection(row);
				},
				hatSelectionChange(val){
					this.hatMultipleSelection = val;
				},
				changeDate(value){
					loadData(value);
				},
			},
		});
		
		function getStrDate(date, split="-"){
			return date.getFullYear().toString() + split + (date.getMonth() + 1).toString() + split + date.getDate().toString();
		}
		
		function loadData(date){
			let url = jhURL + "json_data/"+ date +".json";
			url = "json_data/"+ date +".json";
			$.getJSON(url,{},function(jsonData){
				let hat = {};
				let hatarr = [];
				let lbgk = {};
				let lbgkarr = [];
				for (p in jsonData) {
					if(jsonData[p] && jsonData[p].length > 0){
						for (let i = 0; i < jsonData[p].length; i++) {
							if(jsonData[p][i].code){
								jsonData[p][i].jhhs = (parseFloat(jsonData[p][i].autionamount) / parseFloat(jsonData[p][i].marketvalue) / 100).toFixed(2);
								jsonData[p][i].imgurl = "http://image.sinajs.cn/newchart/monthly/n/" + (jsonData[p][i].code.startsWith("6")?"sh":"sz") + jsonData[p][i].code + ".gif";
							}
							if(p == "hat" || p == "hat10"){
								if(!hat[jsonData[p][i].code]){
									hat[jsonData[p][i].code] = jsonData[p][i].code;
									hatarr.push(jsonData[p][i]);
								}
							} else if(p == "fb" || p == "pbyd" || p == "lbgk"){
								if(!lbgk[jsonData[p][i].code]){
									lbgk[jsonData[p][i].code] = jsonData[p][i].code;
									lbgkarr.push(jsonData[p][i]);
								}
							}
						}
					}
				}
				vm.tableDatas = {hat:hatarr,lbgk:lbgkarr};
			});
		}
		
		function postData(url, datas){
			console.log(datas);
			console.log(JSON.stringify(datas));
			$.ajax({
				type:"post",
				url:url,
				data:{"data":JSON.stringify(datas)},
				success: function(res){
					if(res.code == 200){
						vm.$message.success(res.message);
					}else{
						vm.$message.error(res.message);
					}
				},
				error: function(e){
					console.log("更新数据失败，错误信息如下：");
					console.log(e);
					vm.$message.error("更新数据失败，请刷新页面后再次尝试。");
				}
			});
		}
		
		loadData(vm.showDate);
	</script>
</html>